<template>
  <div class="markerSetPanelBox">
    <div class="markersBox"
      :style="{width: maximum * 80 + 'px'}">

      <!-- 锚点面板 -->
      <div class="wrapMarkers">
        <ul class="markerSetUl" ref="markerSetUl" :style="{width: 80 * markerSetData.recordList.length + 'px', position: showFlag ? 'static' : 'relative'}">
          <li class="markerSetLi" v-for="(marker) in markerSetData.recordList" :key="marker.key">
            <span
              :class="{'showStyleBg1': currentMarkerId !== marker.anchorTypeId || !showFlag, 'showStyleBg2': (currentMarkerId === marker.anchorTypeId) && showFlag}"
              v-if="selectMarkers.indexOf(marker.anchorTypeId) > -1"
              class="showStyle"
              @click="showFlagFn(marker.anchorTypeId)">
            </span>
            <input type="checkbox" v-model="selectMarkers" :id="marker.anchorTypeId" name="selectMarkers" :value="marker.anchorTypeId">
            <label :for="marker.anchorTypeId">
              <img style="width: 33px; height: 29px" :src="marker.anchorIconUrl" :alt="marker.anchorTypeName">
              <span>{{marker.anchorTypeName}}</span>
            </label>

            <!-- 锚点信息 -->
            <ul v-if="showFlag && currentMarkerId === marker.anchorTypeId" @change="showStyle(marker, $event)" class="markerMsgUl">
              <li>
                <label class="wrapBox">
                  <p class="wrapLabel">
                    显示名称
                  </p>
                  <input
                    type="checkbox"
                    v-model="marker.showCheck"
                    name="showName"
                    id="showName"
                    value="showName">
                  <label for="showName" class="checkLabelStyle"></label>
                </label>
              </li>
              <li class="showUnEdit">
                <label class="wrapBox">
                  <p class="wrapLabel">
                    显示未编辑锚点
                  </p>
                  <input
                    type="checkbox"
                    v-model="marker.showCheck"
                    name="showUnEdit"
                    id="showUnEdit"
                    value="showUnEdit">
                  <label for="showUnEdit" class="checkLabelStyle"></label>
                </label>
              </li>
              <li class="showUnLink">
                <label class="wrapBox">
                  <p class="wrapLabel">
                    显示未关联锚点
                  </p>
                  <input
                    type="checkbox"
                    v-model="marker.showCheck"
                    name="showUnLink"
                    id="showUnLink"
                    value="showUnLink">
                  <label for="showUnLink" class="checkLabelStyle"></label>
                </label>
              </li>
              <li>
                <p class="titleMsg">已完成锚点显示</p>
              </li>
              <li>
                <label for="mapScaleAll" class="wrapBox">
                  <p class="wrapLabel">
                    显示全部
                  </p>
                  <input
                    v-model="marker.showAll"
                    type="checkbox"
                    name="showAll"
                    id="mapScaleAll"
                    value="mapScaleAll">
                  <label for="mapScaleAll" class="checkLabelStyle"></label>
                </label>
              </li>
              <li v-for="(msg) in marker.msgs" :key="marker.anchorTypeId + msg.detailCode">
                <label :for="marker.anchorTypeId + msg.detailCode" class="wrapBox">
                  <p class="wrapLabel">
                    {{msg.detailName}}
                  </p>
                  <input
                    type="checkbox"
                    name="showBili"
                    v-model="marker.showList"
                    :id="marker.anchorTypeId + msg.detailCode"
                    :value="msg.detailCode">
                  <label :for="marker.anchorTypeId + msg.detailCode" class="checkLabelStyle"></label>
                </label>
              </li>
            </ul>
          </li>
        </ul>
      </div>

      <!-- 左右指示器 -->
      <div v-show="markerSetData.recordList.length > maximum" class="iconGo" @click="iconGo">
        <span v-show="stepCount !== 0" class="leftIconGo" go-type="left"></span>
        <span v-show="stepCount !== (markerSetData.recordList.length - maximum)" class="rightIconGo" go-type="right"></span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      showList: '',
      markerTypeIds: [],
      selectMarkers: [],
      markerSetUl: '',
      currentGoType: '',
      goTime: '', // 轮播定时器
      goPix: 9, // 每个锚点块完成一次移动的循环次数。固定，值为 (每个锚点块的宽度 80 / 每次移动的像素 8) - 1
      stepCount: 0, // 当前索引
      showFlag: false,
      currentMarkerId: ''
    }
  },
  model: {
    prop: 'showUlFlag',
    event: 'showUlFlag'
  },
  props: {
    /**
     * 是否展示锚点信息
     * @type {Boolean}
     */
    showUlFlag: {
      type: Boolean
    },
    /**
     * 锚点类型数据
     * @type {Object}
     */
    markerSetData: {
      type: Object
    }
  },
  computed: {
    /**
     * 锚点最大展示数
     * @author chend(cdhahaha@163.com)
     * @createDate 2018-08-20
     * @return     {Number}   [description]
     */
    maximum () {
      return this.markerSetData.recordList.length < this.markerSetData.maximum ? this.markerSetData.recordList.length : this.markerSetData.maximum
    }
  },
  methods: {
    /**
     * 锚点信息的显示隐藏
     * @author chend(cdhahaha@163.com)
     * @createDate 2018-09-03
     * @param      {String}   anchorTypeId 锚点Id
     */
    showFlagFn (anchorTypeId) {
      this.showFlag = !this.showFlag
      if (this.currentMarkerId !== anchorTypeId) {
        this.showFlag = true
      }
      this.currentMarkerId = anchorTypeId
    },
    /**
     * 锚点类型操作面板change事件触发.
     * @author chend(cdhahaha@163.com)
     * @createDate 2018-08-20
     * @param      {Object}   currentMarker [description]
     * @param      {Event}   e             [description]
     */
    showStyle (currentMarker, e) {
      var name = e.target.getAttribute('name')
      /**
       * 如果点击的是 ‘显示全部’ 按钮 则勾选所有比例，如果有比例未勾选，则 ‘显示全部按钮’去除勾选
       */
      if (name === 'showAll') {
        if (currentMarker.showAll.indexOf('mapScaleAll') > -1) {
          currentMarker.showList = []
          currentMarker.msgs.forEach(v => {
            currentMarker.showList.push(v.detailCode)
          })
        } else {
          currentMarker.showList = []
        }
      } else if (name === 'showBili') {
        if (currentMarker.msgs.length !== currentMarker.showList.length) {
          currentMarker.showAll = []
        } else {
          currentMarker.showAll = ['mapScaleAll']
        }
      }
      this.$emit('showList', currentMarker, name)
    },
    /**
     * 左右指示器点击触发
     * @author chend(cdhahaha@163.com)
     * @createDate 2018-08-20
     * @param      {Event}   e [description]
     */
    iconGo (e) {
      var goType = e.target.getAttribute('go-type')
      this.markerSetUl = this.markerSetUl || this.$refs.markerSetUl
      this.markerSetUl.style.marginLeft = this.markerSetUl.style.marginLeft || '0px'
      if (goType === 'left' && parseInt(this.markerSetUl.style.marginLeft) === 0) {
        return
      }
      if (goType === 'right' && parseInt(this.markerSetUl.style.marginLeft) === -(this.markerSetData.recordList.length - this.maximum) * 80) {
        return
      }
      this.showFlag = false
      this.iconGoByOneStep(this.markerSetUl, goType)
    },
    /**
     * 轮播滚动函数
     * @author chend(cdhahaha@163.com)
     * @createDate 2018-08-20
     * @param      {Object}   ele
     * @param      {String}   type left / right 左滑或者右滑
     */
    iconGoByOneStep (ele, type) {
      var count = 0
      if (this.currentGoType && this.currentGoType !== type) {
        this.goPix = 18 - this.goPix // 指示器触发时，是否完成一次轮播滚动
      }
      this.currentGoType = type
      this.goTime && clearInterval(this.goTime)
      this.goTime = setInterval(() => {
        if (this.goPix > 0) {
          this.goPix--
        } else {
          this.goPix = 9
          this.stepCount = type === 'left' ? this.stepCount - 1 : this.stepCount + 1
          count++
          if (count === this.maximum) {
            clearInterval(this.goTime)
            count = 0
          } else if ((this.stepCount === 0) || this.stepCount === (this.markerSetData.recordList.length - this.maximum)) {
            clearInterval(this.goTime)
          }
        }
        if (type === 'left') {
          ele.style.marginLeft = parseInt(parseInt(ele.style.marginLeft) + 8) + 'px'
        } else {
          ele.style.marginLeft = parseInt(parseInt(ele.style.marginLeft) - 8) + 'px'
        }
      }, 20)
    }
  },
  mounted () {
  },
  watch: {
    showUlFlag (cur) {
      this.showFlag = false
      this.$emit('showUlFlag', cur)
    },
    markerSetData: {
      handler (cur, old) {
        if (cur.id !== old.id) {
          this.selectMarkers = ''
        }
      },
      deep: true
    },
    selectMarkers (cur) {
      this.showFlag = false
      return this.$emit('selectIcon', cur)
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less">
.markerSetPanelBox {
  .markersBox {
    position: relative;
    border-bottom: 2px solid #00eaff;
    padding: 0 20px;
    float: left;
    .showStyleBg1 {
      background: url('../../assets/images/mapIconTest/zhankai.png') #022134 no-repeat center;
    }
    .showStyleBg2 {
      background: url('../../assets/images/mapIconTest/shouhui.png') #022134 no-repeat center;
    }
    .showStyle {
      display: block;
      height: 18px;
      width: 58px;
      margin-left: 11px;
      position: absolute;
      top: 14px;
      z-index: 2;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
    .leftIconGo {
      position: absolute;
      display: block;
      left: 0;
      background: url('../../assets/images/mapIconTest/leftIcon.png') center no-repeat;
      background-size: 9px 19px;
      height: 20px;
      width: 20px;
      bottom: 30px;
      cursor: pointer;
    }
    .rightIconGo {
      position: absolute;
      display: block;
      right: 0;
      background: url('../../assets/images/mapIconTest/rightIcon.png') center no-repeat;
      background-size: 9px 19px;
      height: 20px;
      width: 20px;
      bottom: 30px;
      cursor: pointer;
    }
    .wrapMarkers {
      overflow-x: hidden;
      .markerSetUl {
        float: left;
        list-style: none;
        margin-left: 0px;
        .markerSetLi {
          float: left;
          height: 80px;
          padding-top: 40px;
          >label {
            position: relative;
            display: block;
            background: url('../../assets/images/mapIconTest/2dBox.png') no-repeat center;
            background-size: 80px 80px;
            height: 80px;
            width: 80px;
            cursor: pointer;
            >img {
              position: absolute;
              bottom: 0;
              left: 50%;
              margin-left: -16px;
              margin-bottom: 32px;
            }
            >span {
              position: absolute;
              display: block;
              text-align: center;
              color: #fff;
              width: 70%;
              margin-left: 15%;
              bottom: 15px;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space: nowrap;
            }
          }
          >input {
            display: none;
            &:checked + label {
              background: url('../../assets/images/mapIconTest/2dBoxChecked.png') no-repeat center;
              background-size: 80px 100px;
              height: 100px;
              width: 80px;
              bottom: 38px;
            }
          }
          .markerMsgUl {
            position: absolute;
            padding-bottom: 10px;
            bottom: 100%;
            transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            list-style: none;
            margin-left: 40px;
            /* IE 9 */
            -moz-transform: translateX(-50%);
            /* Firefox */
            -webkit-transform: translateX(-50%);
            /* Safari 和 Chrome */
            -o-transform: translateX(-50%);
            /* Opera */
            &:after {
              position: absolute;
              bottom: -10px;
              left: 50%;
              margin-left: -10px;
              display: block;
              content: " ";
              height: 0px;
              width: 0px;
              border: 10px solid;
              border-color: #01e0f5 transparent transparent transparent;
              z-index: 9;
            }
            &:before {
              position: absolute;
              bottom: -9px;
              left: 50%;
              margin-left: -10px;
              display: block;
              content: " ";
              height: 0px;
              width: 0px;
              border: 10px solid;
              border-color: #002b47 transparent transparent transparent;
              z-index: 10;
            }
            .showUnEdit, .showUnLink {
              background-color: #001e31;
            }
            >li {
              position: relative;
              color: #fff;
              background-color: #002b47;
              border-left: 1px solid #01e0f5;
              border-right: 1px solid #01e0f5;
              .titleMsg {
                font-size: 16px;
                padding: 10px 20px;
                color: #00ffff;
              }
              .wrapBox {
                display: block;
                padding: 0 10px 0 36px;
                width: 118px;
                cursor: pointer;
                >input {
                  display: none;
                  &:checked + .checkLabelStyle {
                    background: url('../../assets/images/mapIconTest/checkeBoxChecked.png') center no-repeat;
                  }
                }
              }
              .checkLabelStyle {
                position: absolute;
                left: 10px;
                top: 50%;
                margin-top: -9px;
                display: block;
                background: url('../../assets/images/mapIconTest/checkeBox.png') center no-repeat;
                height: 17px;
                width: 17px;
                background-size: 17px 17px;
                cursor: pointer;
              }
              .wrapLabel {
                display: block;
                padding: 8px 10px;
                font-size: 14px;
              }
              &:hover {
                background-color: #001e31
              }
              &:last-child {
                border-bottom: 1px solid #01e0f5;
              }
              &:first-child {
                border-top: 1px solid #01e0f5;
              }
            }
          }
        }
      }
    }
  }
}
</style>
